<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <link type="text/css" rel="stylesheet" href="css/chapter2-3.css" />
</head>
<body>
    <pre>
        javascript的组成：
            ECMAScript：基础和核心，规定语法结构。 简称es5
            BOM：浏览器对象模型
            DOM：文档对象模型
        
        DOM：是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档
        节点的分类：[如果没有特殊说明，那么标签、元素、节点都表示同一个含义]
            1、元素节点
                   从标签开始到标签结束，包含的所有内容
            2、属性节点
                   在标签名之后，空格隔开的内容
            3、文本节点
                   开始标签和结束标签之间的所有内容
            4、注释节点
                   网页注释
        节点信息的获取：
            nodeName：节点名称 
                        获取非元素节点的类型：#类型名，元素节点获取标签名
            nodeValue：节点值 
                        获取非元素节点的内容，元素节点获取null
            nodeType：节点类型
                      元素#element    --> 1
                      属性#attribute  --> 2
                      文本#text       --> 3
                      注释#comment   --> 8

        获取节点：
            获取元素节点的方式：
                document.getElementById(id选择器名)    返回唯一一个元素
                document.getElementsByName(name属性名) 返回数组
                document.getElementsByClassName(类选择器名) 返回数组
                document.getElementsByTagName(标签名) 返回数组
                document.querySelector(选择器)  只返回第一个
                document.querySelectorAll(选择器)  返回数组
            获取属性节点的方式：
                元素节点对象.getAttribute(属性名) 
                元素节点对象.getAttributeNames() 获取指定元素的所有属性名
                元素节点对象.getAttributeNode(属性名) 获取属性节点[包括属性名=属性值]
                元素节点对象.属性名  根据名获取值
            获取文本节点的方式：
                元素节点对象.innerText  纯文本
                元素节点对象.innerHTML  带标签的文本
            没有单独的方法直接获取注释节点
                但是可以通过层次关系来获取
        
        根据层次关系获取节点：
            元素节点对象.parentNode  获取一级父元素节点
            元素节点对象.childNodes  获取一级子节点，返回所有类型节点的数组
            元素节点对象.children    获取一级子元素节点，返回元素节点的数组
            元素节点对象.firstChild  获取第一个子节点
            元素节点对象.firstElementChild  获取第一个子元素节点
            元素节点对象.lastChild   获取最后一个子节点
            元素节点对象.lastElementChild  获取最后一个子元素节点
            元素节点对象.nextSibling  获取参照节点的下一个节点
            元素节点对象.nextElementSibling  获取参照节点的下一个元素节点
            元素节点对象.previousSibling  获取参照节点的上一个节点
            元素节点对象.previousElementSibling  获取参照节点的上一个元素节点
        
        创建元素节点：
            document.createElement("标签名")   创建新节点
            元素节点.cloneNode(boolean)        拷贝已存在的节点
                                              参数true表示不仅拷贝元素节点，还拷贝文本节点
                                              参数false表示仅拷贝元素节点，不拷贝文本节点
        新增节点：
            新增元素节点：
                在父元素内的末尾追加子节点：
                    父元素节点.appendChild(子元素节点) 
                在父元素内，往参照节点B之前添加同辈节点A
                    父元素节点.insertBefore(插入节点,参照节点)
            新增属性节点：
                元素节点.setAttribute(属性名,属性值)
                元素节点.属性名 = 值
            新增文本节点：
                //元素节点.innerText = 文本
                //元素节点.innerHTML = 文本
            新增注释节点：
                手写网页代码
        修改节点：
            修改元素节点：
                父节点.replaceChild( newNode, oldNode) 
            修改属性节点：
                元素节点.setAttribute(属性名,属性值)
                元素节点.属性名 = 值 [如果是类选择器class,写法是className]
            修改文本节点：
                元素节点.innerText = 文本
                元素节点.innerHTML = 文本
            修改注释节点：
                无
        删除节点：
            删除元素节点：
                父节点.removeChild(子节点)
                待删节点.remove()
            删除属性节点：
                元素节点.removeAttribute('属性名') 
            删除文本节点：
                //元素节点.innerText = ""
                //元素节点.innerHTML = ""
            删除注释节点：
                无
        
        DOM设置样式：
            1) style属性
                  元素节点.style.属性名 = "属性值";
                  注意：将css中的属性名改为驼峰命名法
            2) className属性
                  元素节点.className = "类选择器名"
        DOM获取样式：
            1) HTML元素.style.样式属性;
            2) document.defaultView.getComputedStyle(元素,null).属性
            3) HTML元素.currentStyle.样式属性
        DOM清除指定样式：
            DOM对象.style.样式属性 = "";

    </pre>
    <!-- 网页注释 -->
    <div id="mydiv1">
        <p>p标签</p>
    </div>
    <ul>
        <li>第一项</li>
        <li class="sty1">第二项</li>
        <li class="sty1">第三项</li>
    </ul>
    <input type="checkbox" name="ah" value="cg"/>唱歌
    <input type="checkbox" name="ah" value="tw"/>跳舞

    <input id="range" type="range" min="0" max="100" step="10" value="0" abc="123" />

    <br/><br/>
    <button onclick="test1()">演示获取元素节点</button><br/><br/>
    <button onclick="test2()">演示获取属性节点</button><br/><br/>
    <button onclick="test3()">演示获取文本节点</button><br/><br/>

    <div id="div1">
        111
        <span>x</span>
        <!-- 这是注释 -->
        <p id="p1">
            222
            <strong id="s1">333</strong>
        </p>
        <p>p2</p>
    </div>
    <br/><br/>

    <hr/>

    <ul id="ul1">
        <li style="color:red">第一项</li>
        <li id="er" style="color:blue">第二项</li>
    </ul>

    <div id="div2">
        演示样式
    </div>
    <br/><br/>
    <button onclick="test4()">演示获取一级父元素节点</button><br/><br/>
    <button onclick="test5()">演示获取一级子节点</button><br/><br/>
    <button onclick="test6()">演示获取第一个/最后一个子节点</button><br/><br/>
    <button onclick="test7()">演示获取同辈节点</button><br/><br/>
    <button onclick="test8()">演示创建元素节点</button><br/><br/>
    <button onclick="test9()">演示新增元素节点</button><br/><br/>
    <button onclick="test10()">演示新增属性节点</button><br/><br/>
    <button onclick="test11()">演示修改元素节点</button><br/><br/>
    <button onclick="test12()">演示删除元素节点</button><br/><br/>
    <button onclick="test13()">演示删除属性节点</button><br/><br/>
    <button onclick="test14()">演示设置样式</button><br/><br/>
    <button onclick="test15()">演示获取样式</button><br/><br/>
    <button onclick="test16()">演示清除样式</button><br/><br/>
    
    <br/><br/><br/><br/>
    <script type="text/javascript" src="js/chapter2-3.js"></script>
</body>
</html>